<template>
    <div id="app" class="page-profile" :class="{'page-loading':page.loading}">
        <scroll-fixed>
            <page-bar>
                <a href="javascript:;" @click="back" slot="left">
                    <i class="uicon uicon-back-w"></i>
                </a>
                <div slot="middle">
                    <div class="user-card-wrap" :class="{'default': !member_info.head_img}" slot="middle">
                        <img v-if="member_info.head_img" :src="member_info.head_img" />
                        <img v-else src="../assets/uc_bg.jpg" />
                    </div>
                    <span>{{member_info.nickname}}</span>
                </div>
                <div slot="right"></div>
                <!-- <a href="javascript:;" slot="right" @click="report_status = true">
                    <i class="uicon uicon-info" ></i>
                </a> -->
            </page-bar>
        </scroll-fixed>
        <ui-loading v-if="page.loading" />
        <page-error v-else-if="page.error" @refresh="pageRefresh"></page-error>
        <template v-else>
            <div class="user-card">
                <div class="user-card-wrap" :class="{'default': !member_info.head_img}">
                    <img v-if="member_info.head_img" :src="member_info.head_img" />
                    <img v-else src="../assets/uc_bg.jpg" />
                </div>
                <div class="info-wrap">
                    <div class="user-logo">
                        <img v-if="!member_info.head_img" src="../assets/icon-un-login.png" alt="">
                        <img v-else :src="member_info.head_img" alt="">
                    </div>
                    <div class="user-info">
                        <p class="uname">{{member_info.nickname}}</p>
                        <p class="ulevel" v-if="member_info.level_id>0 && user.level_id>0">
                            <i class="uicon uicon-vip-w"></i><span>vip.{{member_info.level_id}}</span>
                        </p>
                    </div>
                    <a href="javascript:;" class="follow" @click="follow" :class="{'on':is_focus}">{{is_focus ? '已关注' : '+ 关注'}}</a>
                </div>
                <div class="user-total">
                    <a href="javascript:;"><b>{{total.comment}}</b>发表</a>
                    <a :href="$config.pages.follow+'?id='+member_info.id + '&type=1'"><b>{{total.focus}}</b>关注</a>
                    <a :href="$config.pages.follow+'?id='+member_info.id + '&type=2'"><b>{{total.fans}}</b>粉丝</a>
                    <a href="javascript:;" @click="admire_status = true"><b>{{total.admire}}</b>获赞</a>
                </div>
            </div>
            <div class="ui-tab">
                <a href="javascript:;" @click="changeTab(1)" :class="{'on':page.type == 1}">动态</a>
                <a href="javascript:;" @click="changeTab(2)" :class="{'on':page.type == 2}">评论</a>
            </div><!-- end tab -->
            <page-error v-if="page.is_end && list.length == 0">
                <div slot="logo">
                    <img src="../assets/page-empty.png" class="logo">
                </div>
                <div slot="text">
                    <p class="text">暂无内容</p>
                </div>
            </page-error>
            <scroll-list v-else class="ui-list" :disabled="true" :config="scroll" @bottom="loadmore">
                <transition-group class="index-list" name="list">
                    <template v-if="page.type == 1">
                        <square-item 
                            v-for="(item,index) in list" 
                            @delete="delItem(index)"
                            @item-share="share(item)" 
                            :item="item" 
                            :key="item.id"/>
                    </template>
                    <template v-else-if="page.type == 2">
                        <ui-comment-item v-for="item in list" :item="item" @del="delCommentItem" :type='3' :key="item.id"></ui-comment-item>
                    </template>
                </transition-group>
            </scroll-list><!-- en dui-list -->
        </template>

        <transition name="page-slide-left">
            <ui-report v-if="report_status" :id="page.id" :from="'user'" @cancel="report_status = false" @done="report_status = false,$toast('举报成功')"/>
        </transition>

        <ui-popup :status="admire_status" @close="admire_status = false">
            <transition name="page-slide-bottom">
                <div class="popup-admire" v-if="admire_status">
                    <div class="main">
                        <img src="../assets/admire.gif">
                        <p>“{{member_info.nickname}}”共获{{total.admire}}赞</p>
                    </div>
                    <a href="javascript:;" @click="admire_status = false">确定</a>
                </div>
            </transition>
        </ui-popup>

        <offline />
        <popup-more :status="moreConfig.status" :config="moreConfig" @close="moreConfig.status = false"></popup-more>

    </div><!-- end page-profile -->
</template>
<script>
import pageBar from "../components/pagebar.vue";
import scrollFixed from "../components/scrollFixed.vue";
import ScrollList from "../components/scrollList.vue";
import UILoading from "../components/loading.vue";
import pageError from "../components/pageError.vue";
import offline from "../components/offline.vue";
import commentItem from "../components/commentItem.vue";
import Popup from "../components/popup.vue";
import report from '../components/report.vue';
import MoreBox from '@/components/morebox.vue'

import SquareItem from '@/square/components/items.vue';
import Lazy from '@/plugins/lazy.js'

export default {
    name:'profile',
    components: {
        [ScrollList.name]: ScrollList,
        [pageBar.name]: pageBar,
        [scrollFixed.name]: scrollFixed,
        [UILoading.name]: UILoading,
        [pageError.name]: pageError,
        [commentItem.name]: commentItem,
        [Popup.name]: Popup,
        [report.name]: report,
        [SquareItem.name]: SquareItem,
        [MoreBox.name]: MoreBox,
        [offline.name]: offline
    },
    data(){
        return {
            lazy:new Lazy(),
            page:{
                id:'',
                loading:true,
                page_no:1,
                type:1, // 1 动态， 2 评论
                error:false,
                is_end:false,
            },
            user:this.$utils.user,
            report_status:false,
            list:[],
            scroll:{
                bottom:false
            },
            member_info:{},
            is_focus:0,
            total:{
                admire:'--',
                fans:'--',
                focus:'--',
                comment:'--',

            },
            admire_status:false,
            moreConfig:{
                id:'',
                status:false,
                fav:false,
                night:false,
                font:false,
                range:3,
                hideOption:true,
                email_title:'泛亚资讯 动态详情',
                email_content:'xxxxxx'
            },
        }
    },
    mounted(){
        this.$on("pageRefresh", isClean => {
            this.page.page_no = 1;
            this.page.loading = true;
            this.page.error = false;
            this.loadPage()
                .catch(e => {
                    this.page.error = true;
                })
                .finally(() => {
                    this.page.loading = false;
                });
            this.loadTabDate().then(rs=>{
                this.$nextTick(() => {
                    this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.is_end ? 'done' : false);
                });
            })
        });
        let parse = this.$utils.urlFactory.parse(location.search);
        if (parse && parse.id) {
            this.page.id = parse.id;
            switch (parse.type){
                case "1":
                    this.page.type = 1;
                    break;
                case "2":
                    this.page.type = 2
                    break;
            }
            this.$emit("pageRefresh", true);
            // this.page.loading = false;
        } else {
            this.$toast('参数有误').then(()=>{
                history.back();
            })
        }
    },
    methods:{
        changeTab(type){
            if(type == this.page.type) return;
            location.href = this.$config.pages.profile + '?id=' + this.member_info.id + '&type=' + type;
        },
        follow(){
            if(this.member_info._fouce_loading ) return;
            let isFollw = !!this.is_focus;
            this.member_info._fouce_loading = true;
            let url = isFollw ? '?ct=member_focus&ac=del_focus' : '?ct=member_focus&ac=add_focus';
            this.$http.post(url,{
                member_id:this.member_info.id
            }).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        this.is_focus = isFollw ? 0 : 1;
                        this.$toast((isFollw ? '取消': '关注') + "成功");
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                })
                .finally(() => {
                    this.member_info._fouce_loading= false;
                });
        },
        back(){
            if(document.referrer == ''){
                location.href = this.$config.pages.home
            }else{
                history.back();
            }
        },
        loadPage(){
            let url,params = {
                member_id:this.page.id,
                page_size:10,
                page_no:this.page.page_no
            }
            return this.$http.get('?ct=comment&ac=index',{params}).then(response =>{
                let {data} = response;
                if(data.code == 0){
                    let rs = data.data;
                    this.member_info = rs.member_info;
                    this.total.admire = rs.admire_count;
                    this.total.comment = rs.comment_count;
                    this.total.fans = rs.fans_count;
                    this.total.focus = rs.focus_count;
                    this.is_focus = rs.is_focus;
                    
                }else{
                    this.$toast(data.msg);
                }
                
            }).catch(e=>{
                this.$toast('获取评论数据失败');
            })
        },
        loadTabDate(){
            let url = this.page.type == 1 ? '?ct=member_publish&ac=member_dynamic' : '?ct=comment&ac=member_comment';
            let params = {
                member_id:this.page.id,
                page_size:15,
                page_no:this.page.page_no

            };
            return this.$http.get(url,{params}).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    this.list = this.list.concat(data.data.list);
                    this.page.is_end = !data.data.is_have_data;
                    this.page.page_no++;

                    this.$nextTick(()=>{
                        this.lazy.update();
                    })
                }else{
                    this.$toast(data.msg);
                }
            }).catch(e=>{
                this.$toast('获取动态失败');
            })
        },
        pageRefresh() {
            this.$emit("pageRefresh", true);
        },
        loadmore(){
            if (this.scroll.bottom || this.page.is_end) return false;
            this.scroll.bottom = true;
            this.loadTabDate().then(rs=>{
                this.$nextTick(() => {
                    this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.is_end ? 'done' : false);
                });
            })
        },
        delItem(index){
            this.list.splice(index,1);
        },
        share(){
            this.moreConfig.status = true;
        },
        delCommentItem(id) {
            let item = this.list.filter((res)=> {
                return res.id == id
            })
            let index = this.list.indexOf(item[0]);
            if(index != -1) {
                this.list.splice(index, 1);
                this.info.comment_count = this.list.length;
            }
        }

    }
}
</script>
<style lang="less">
.page-profile {
    .page-bar-left,
    .page-bar-right,
    .page-bar-middle span {
        position: relative;
        z-index:2;
    }
    
    .scroll-fixed {
        .page-bar-middle {
            transition: opacity .1s ;
            opacity: 0;
        }
        &.sticky .page-bar-middle{
            opacity: 1;
        }
        .page-bar {
            background-color: transparent;
            border-bottom:none;
        }
        .page-bar-middle span {
            font-size:36px;
            color:#fff;
        }
    }
    .user-card-wrap {
        background-size:cover;
        overflow: hidden;
        &:not(.default){
            filter: blur(3px);
            &::after {
                content: '';
                background-color:rgba(0,0,0,.3)
            } 
        }
        img {
            display: block;
            width:100%;
            height:auto;
        }
        &,&::after {
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }
        
    }
    .user-card {
        margin-top:-82px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height:378px;
        background-color:#fff;
        color:#fff;
        overflow: hidden;

        .info-wrap {
            margin-top:112px;
            display: flex;
            align-items: center;
            height:96px;
            width:100%;
            padding:0 40px 0 24px;
        }
        .follow {
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: inherit;
            flex-shrink: 0;
            flex-grow: 0;
            // width: 110px;
            padding:0 10px;
            height:40px;
            border-radius: 20px;
            font-size:24px;
            color:#fff;
            border:2px solid #e2e2e2;

            &.on {
                text-indent: 26px;
                // color:#999;
                background-image:url(../assets/icon-right.png);
                background-size:18px 13px;
                background-repeat: no-repeat;
                background-position:6px center;
            }
        }
        .info-wrap,
        .user-total {
            position: relative;
            z-index:1;
        }
        .user-logo {
            margin-right:20px;
            width: 96px;
            height: 100%;
            border:3px solid #fff;
            border-radius: 50%;
            overflow: hidden;
            img {
                display: block;
                width:100%;
                height: auto;
            }
            
        }
        .uname {
            font-size:30px;
        }
        .ulevel {
            margin-top:18px;
            font-size:24px;
            span {
                opacity:.7;
            }
        }
        
        .user-info {
            flex:1;
            height:96px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color:#fff;
        }
        .user-total {
            width:100%;
            margin:30px 0;
            &,a {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            a {
                flex-direction: column;
                position: relative;
                flex:1;
                font-size:20px;
                color: #e2e2e2;
                text-align: center;
                b {
                    color:#fff;
                    font-size:30px;
                    font-weight: normal;
                    margin-bottom:18px;
                }

                & + a {
                    &::before {
                        content:'';
                        position:absolute;
                        left:0;
                        top:50%;
                        transform: translateY(-50%);
                        width:1px;
                        height:30px;
                        background-color:rgba(255,255,255,.2);
                    }
                }
            }
        }
        .user-edit {
            position: absolute;
            top:0;
            right:0;
            display: flex;
            padding:30px;
        }
    }
}
.popup-admire {
    position: absolute;
    z-index:2;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    flex-direction: column;
    width:562px;
    height:398px;
    background-color:#fff;
    border-radius:8px;

    &,a,.main,.main p {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main {
        position: relative;
        padding:0 30px;
        flex:1;
        flex-direction: column;
        justify-content: flex-end;
        p {
            height:180px;
            font-size:36px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        img {
            position: absolute;
            left:0;
            right:0;
            top:-108px;
            width:285px;
            height:auto;
            margin:auto;
        }
    }
    .main,a {
        width:100%;
    }
    a {
        height:81px;
        font-size:30px;
        color:#666;
        border-top:1px solid #e2e2e2;
    }
}
</style>

